<!DOCTYPE html>
<html style="height: 100%;width:100%">
	<head>
		<meta charset="utf-8">
	</head>
	<style type="text/css">
		body {
			padding: 0;
			margin: 0;
		}
	</style>
	<body style="height: 100%; width:100%">
		<div id="chart-panel" style="height: 100%;width: 100%"></div>
		<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
		<script type="text/javascript">
			var dom = document.getElementById("chart-panel");
			var myChart = echarts.init(dom);
			var option;
			var colorList = [
				[
					'#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed',
					'#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0',
					'#1e90ff', '#ff6347', '#7b68ee', '#d0648a', '#ffd700',
					'#6b8e23', '#4ea397', '#3cb371', '#b8860b', '#7bd9a5'
				],
				[
					'#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed',
					'#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0',
					'#1e90ff', '#ff6347', '#7b68ee', '#00fa9a', '#ffd700',
					'#6b8e23', '#ff00ff', '#3cb371', '#b8860b', '#30e0e0'
				],
				[
					'#929fff', '#9de0ff', '#ffa897', '#af87fe', '#7dc3fe',
					'#bb60b2', '#433e7c', '#f47a75', '#009db2', '#024b51',
					'#0780cf', '#765005', '#e75840', '#26ccd8', '#3685fe',
					'#9977ef', '#f5616f', '#f7b13f', '#f9e264', '#50c48f'
				]
			][2];

			option = {
				backgroundColor: '#062538',
				// 图表标题
				title: {
					show: true, //显示策略，默认值true,可选为：true（显示） | false（隐藏）
					text: 'welcome to susu\'s blog', //主标题文本，'\n'指定换行
					// "welcome to susu's blog"
					x: 'center', // 水平安放位置，默认为左对齐，可选为：
					// 'center' ¦ 'left' ¦ 'right'
					// ¦ {number}（x坐标，单位px）
					y: 'bottom', // 垂直安放位置，默认为全图顶端，可选为：
					// 'top' ¦ 'bottom' ¦ 'center'
					// ¦ {number}（y坐标，单位px）
					//textAlign: null          // 水平对齐方式，默认根据x设置自动调整
					backgroundColor: 'rgba(0,0,0,0)',
					borderColor: '#ccc', // 标题边框颜色
					borderWidth: 0, // 标题边框线宽，单位px，默认为0（无边框）
					padding: [5, 5, 20], // 标题内边距，单位px，默认各方向内边距为5，
					// 接受数组分别设定上右下左边距，同css
					itemGap: 10, // 主副标题纵向间隔，单位px，默认为10，
					textStyle: {
						fontSize: 18,
						fontWeight: 'bolder',
						color: '#fff' // 主标题文字颜色
					},
					subtextStyle: {
						color: '#aaa' // 副标题文字颜色
					}
				},
				tooltip: {},
				animationDurationUpdate: function(idx) {
					// 越往后的数据延迟越大
					return idx * 100;
				},
				animationEasingUpdate: 'bounceIn',
				color: ['#fff', '#fff', '#fff'],
				series: [{
					type: 'graph',
					layout: 'force',
					force: {
						repulsion: 500,
						edgeLength: 10
					},
					roam: true,
					label: {
						normal: {
							show: true
						}
					},
					data: [{
						"name": "苏苏就是小苏苏 - 简书",
						"value": 2373,
						"symbolSize": 48,
						"draggable": true,
						"itemStyle": {
							"normal": {
								"shadowBlur": 100,
								"shadowColor": colorList[0],
								"color": colorList[0]
							}
						}
					}, {
						"name": "vue中iview组件实现表单数据的动态校验",
						"value": 5449,
						"symbolSize": 73,
						"draggable": true,
						"itemStyle": {
							"normal": {
								"shadowBlur": 100,
								"shadowColor": colorList[1],
								"color": colorList[1]
							}
						}
					}, {
						"name": "苏苏就是小苏苏的博客_CSDN博客-git,css,小程序领域博主",
						"value": 2289,
						"symbolSize": 67,
						"draggable": true,
						"itemStyle": {
							"normal": {
								"shadowBlur": 100,
								"shadowColor": colorList[2],
								"color": colorList[2]
							}
						}
					}, {
						"name": "微信小程序实现活动倒计时",
						"value": 2518,
						"symbolSize": 50,
						"draggable": true,
						"itemStyle": {
							"normal": {
								"shadowBlur": 100,
								"shadowColor": colorList[3],
								"color": colorList[3]
							}
						}
					}, {
						"name": "微信小程序实现折线面积图-玫瑰图-立体柱状图",
						"value": 4730,
						"symbolSize": 88,
						"draggable": true,
						"itemStyle": {
							"normal": {
								"shadowBlur": 100,
								"shadowColor": colorList[4],
								"color": colorList[4]
							}
						}
					}, {
						"name": "vue中基于iview封装支持搜索选中的Tree组件",
						"value": 1952,
						"symbolSize": 55,
						"draggable": true,
						"itemStyle": {
							"normal": {
								"shadowBlur": 100,
								"shadowColor": colorList[5],
								"color": colorList[5]
							}
						}
					}, {
						"name": "微信小程序引导用户添加小程序动画页",
						"value": 926,
						"symbolSize": 70,
						"draggable": true,
						"itemStyle": {
							"normal": {
								"shadowBlur": 100,
								"shadowColor": colorList[6],
								"color": colorList[6]
							}
						}
					}, {
						"name": "微信小程序展示不定长菜单项轮播滑动",
						"value": 4536,
						"symbolSize": 67,
						"draggable": true,
						"itemStyle": {
							"normal": {
								"shadowBlur": 100,
								"shadowColor": colorList[7],
								"color": colorList[7]
							}
						}
					}, {
						"name": "微信小程序实现tab选中（特殊圆角）样式",
						"value": 750,
						"symbolSize": 47,
						"draggable": true,
						"itemStyle": {
							"normal": {
								"shadowBlur": 100,
								"shadowColor": colorList[8],
								"color": colorList[8]
							}
						}
					}, {
						"name": "微信小程序实现城市索引选择+搜索",
						"value": 493,
						"symbolSize": 82,
						"draggable": true,
						"itemStyle": {
							"normal": {
								"shadowBlur": 100,
								"shadowColor": colorList[9],
								"color": colorList[9]
							}
						}
					}, {
						"name": "css实现弹出菜单动画（微信小程序）",
						"value": 385,
						"symbolSize": 59,
						"draggable": true,
						"itemStyle": {
							"normal": {
								"shadowBlur": 100,
								"shadowColor": colorList[10],
								"color": colorList[10]
							}
						}
					}, {
						"name": "微信小程序实现单选跳跃选择动画",
						"value": 4960,
						"symbolSize": 90,
						"draggable": true,
						"itemStyle": {
							"normal": {
								"shadowBlur": 100,
								"shadowColor": colorList[11],
								"color": colorList[11]
							}
						}
					}, {
						"name": "微信小程序loading加载动画",
						"value": 8694000,
						"symbolSize": 134,
						"draggable": true,
						"itemStyle": {
							"normal": {
								"shadowBlur": 100,
								"shadowColor": colorList[12],
								"color": colorList[12]
							}
						}
					}, {
						"name": "微信小程序实现雪花飘落的效果",
						"value": 5668,
						"symbolSize": 75,
						"draggable": true,
						"itemStyle": {
							"normal": {
								"shadowBlur": 100,
								"shadowColor": colorList[13],
								"color": colorList[13]
							}
						}
					}, {
						"name": "微信小程序实现抽奖走马灯+圆点闪烁",
						"value": 339,
						"symbolSize": 68,
						"draggable": true,
						"itemStyle": {
							"normal": {
								"shadowBlur": 100,
								"shadowColor": colorList[14],
								"color": colorList[14]
							}
						}
					}, {
						"name": "微信小程序实现加载进度条",
						"value": 671,
						"symbolSize": 62,
						"draggable": true,
						"itemStyle": {
							"normal": {
								"shadowBlur": 100,
								"shadowColor": colorList[15],
								"color": colorList[15]
							}
						}
					}, {
						"name": "微信小程序实现堆叠式轮播",
						"value": 27000,
						"symbolSize": 114,
						"draggable": true,
						"itemStyle": {
							"normal": {
								"shadowBlur": 100,
								"shadowColor": colorList[16],
								"color": colorList[16]
							}
						}
					}, {
						"name": "微信小程序中自定义组件slot的使用",
						"value": 10777000,
						"symbolSize": 130,
						"draggable": true,
						"itemStyle": {
							"normal": {
								"shadowBlur": 100,
								"shadowColor": colorList[17],
								"color": colorList[17]
							}
						}
					}, {
						"name": "微信小程序实现一些炫酷的loading动画",
						"value": 20000,
						"symbolSize": 141,
						"draggable": true,
						"itemStyle": {
							"normal": {
								"shadowBlur": 100,
								"shadowColor": colorList[19],
								"color": colorList[19]
							}
						},
					}]
				}]
			};
			if (option && typeof option === 'object') {
				myChart.setOption(option);
			}
			myChart.on('click', function(params) {
				console.log(params.name);
				window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
			});
		</script>
	</body>
</html>
